<template>
  <!-- 任务派发 -->
  <!-- 子页面——任务内容 -->
  <view class="conter">
    <cc-goback title='任务派发' color="#fff"></cc-goback>
    <view class="navigation_head"></view>
    <view class="head">
      <view class="head_a" @click="show_a">
        任务内容
        <view class="head_border_a" v-if="flag==0">
        </view>
      </view>
      <view class="head_b" @click="show_b">
        完成情况
        <view class="head_border_a" v-if="flag==1">
        </view>
      </view>
    </view>
    <view class="card_a" v-if="flag==0">
      <view class="frist">
        <view class="card_aa">
          任务派发时间
        </view>
        <view class="card_ab">
          {{taskList.createTime}}
        </view>
      </view>
      <view class="frist">
        <view class="card_aa">
          限定完成时间
        </view>
        <view class="card_ab">
          {{taskList.executeTime}}
        </view>
      </view>
      <view class="frist">
        <view class="card_aa_a">
          指定完成人
        </view>
        <view class="card_ab">
          {{taskList.executeUserName}}
        </view>
      </view>
      <view class="content">
        任务内容
      </view>
      <view class="content_word">
        {{taskList.content}}
      </view>
    </view>
    <view class="picture" v-if="flag==0">
      <view class="picture_word">
        任务附件
      </view>
      <view class="download" @click="download(item)" v-for="(item,i) in taskList.files" :key='i'>
        {{item.name}}
      </view>
      <!-- <view class="picture_img">
        <image src="../../static/bg_slices/enclosure.png" mode=""></image>
      </view>
      <view class="picture_word_a">
        任务附件说明.jpg
      </view> -->
     <view class="picture_word_b" v-if="taskList.state>1">
        当前任务{{taskList.stateName}}
      </view>
      <view class="picture_word_c" v-if="taskList.state==1">
        <view class="btn_left" @click="btn_left">
          未通过
        </view> 
        <view class="btn_right" @click="btn_right">
          通过
        </view>
      </view>
    </view>
    <view class="Completion" v-if="flag==1">
      <!-- 一 -->
      <view class="Task_information">
        <view class="box_a">
          <view class="box_color">
          </view>
          <view class="box_word">
            执行信息
          </view>
        </view>
        <view class="box_b">
          <view class="box_name">
            执行人：
          </view>
          <view class="box_name_a">
            {{taskList.executeUserName}}
          </view>
        </view>
        <view class="box_b">
         <view class="box_name">
            完成时间：
         </view>
         <view class="box_name_a">
            {{taskList.executeTime}}
         </view>
        </view>
        <view class="box_bb">
         <view class="box_name">
            定位：
         </view>
        <view class="map">
          <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
          </map>
        </view>
        </view>
      </view>
      <!-- 二 -->
      <view class="Task_information">
        <view class="box_a">
          <view class="box_color">
          </view>
          <view class="box_word">
            任务内容
          </view>
        </view>
        <view class="task_content">
         {{taskList.content}}
        </view>
      </view>
      <!-- 三 -->
      <view class="Task_information">
        <view class="box_a">
          <view class="box_color">
          </view>
          <view class="box_word">
            任务附件
          </view>
        </view>
        <!-- <view class="upload" @click="upload">
          上传附件
        </view> -->
        <view class="download" @click="download(item)" v-for="(item,i) in taskList.files" :key='i'>
          {{item.name}}
        </view>
        <view class="btn_delete">
          预览
        </view>
        <view class="btn_upload">
          下载
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        reason: '',
        taskList: '',
        flag:0,
        flag_a:'',
        id: 0, // 使用 marker点击事件 需要填写id
        title: 'map',
        latitude: 39.909,
        longitude: 116.39742,
        covers: [{
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '../../../static/location.png'
        }, {
          latitude: 39.90,
          longitude: 116.39,
          iconPath: '../../../static/location.png'
        }]
      };
    },
    onLoad() {
      this.taskList = uni.getStorageSync('taskList')
      console.log('1234', this.taskList)
      if(this.taskList){
        this.getdetails()
      }
    },
    methods: {
      // 查看回执任务详情
      getdetails(){
        this.$http.get('/envirnment-basic/app/task/getExecuteTaskDetail/'+this.taskList.id,{}).then(res=>{
          console.log('res',res)
          if(res.code=='00000'){
            console.log('res',res)
          }
        })
      },
      // 任务审核
        To_examine(){
          this.$http.post('/envirnment-basic/app/task/audit',{
            id:this.taskList.id,
            taskList:this.flag_a,
            type:1
          }).then(res=>{
            if(res.code=='00000'){
              console.log('res',res)
            }
          })
        },
      btn_left(){
        this.flag_a = false
        this.To_examine()
      },
      btn_right(){
        this.flag_a = true
        this.To_examine()
      },
      show_a(){
        this.flag = 0
      },
      show_b(){
        this.flag = 1
      },
      
      download(e) {
        plus.runtime.openURL('http://47.114.111.108:8766/envirnment-basic'+e.path);
        // plus.runtime.openURL('http://47.114.111.108:8766/envirnment-basic/pub/download/task/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210409133828.png');
        // console.log(e)
      }
    }
  }
</script>

<style lang="scss">
  .conter {
    // height: 1000rpx;
    background-color: #F7F7F7;
    overflow: hidden;
  }

  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .head {
    display: flex;
    height: 88rpx;
    background: #FFFFFF;
    border: 1px solid #F2F2F2;
    margin-top: 25rpx;
  }

  .head_a {
    width: 50%;
    margin: auto;
    text-align: center;
  }

  .head_b {
    width: 50%;
    margin: auto;
    text-align: center;
  }

  .head_border_a {
    width: 60rpx;
    height: 4rpx;
    margin: auto;
    background: #4EA1FF;
    border-radius: 2rpx;
  }

  .card_a {
    width: 662rpx;
    height: 650rpx;
    margin: 20rpx auto;
    padding: 20rpx;
    border-radius: 8rpx;
    background-color: #FFFFFF;
  }

  .frist {
    display: flex;
  }

  .card_aa {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    margin: 20rpx 68rpx 0 0;
  }

  .card_aa_a {
    font-size: 28rpx;
    letter-spacing: 6rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    margin: 20rpx 68rpx 0 0;
  }

  .card_ab {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    margin-top: 20rpx;
  }

  .content {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    margin-top: 20rpx;
  }

  .content_word {
    margin-top: 20rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 48rpx;
  }

  .picture {
    width: 662rpx;
    margin: 0 auto;
    padding: 20rpx;
    border-radius: 8rpx;
    background-color: #FFFFFF;
  }

  .picture_word {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
  }

  // .picture_img{
  //   width: 642rpx;
  //   height: 320rpx;
  //   image{
  //     width: 100%;
  //     height: 100%;
  //   }
  // }
  .download {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    margin: 20rpx 0 0;
  }

  // .picture_word_a{
  //   font-size: 28rpx;
  //   font-family: PingFang-SC-Medium, PingFang-SC;
  //   font-weight: 500;
  //   color: #333333;
  // }
  .picture_word_b {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: #F5F5F5;
    border-radius: 4rpx;
    margin-top: 20rpx;
  }
  .picture_word_c {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
    height: 80rpx;
    margin-top: 20rpx;
  }
  .btn_left{
    width: 242rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: linear-gradient(343deg, #FF9D84 0%, #FF806C 100%);
    border-radius: 4rpx;
  }
  .btn_right{
  width: 400rpx;
  height: 80rpx;
  line-height: 80rpx;
   text-align: center;
  background: #4EA1FF;
  border-radius: 4rpx;
  }
  .Completion {
    height: 100vh;
    background: #F7F7F7;
  }
  
  .Task_information {
    position: relative;
    width: 662rpx;
    margin: 20rpx auto;
    border-radius: 8rpx;
    padding: 20rpx;
    background-color: #FFFFFF;
  }
  
  .box_a {
    display: flex;
    align-items: center;
  }
  
  .box_color {
    width: 14rpx;
    height: 28rpx;
    margin-right: 12rpx;
    background: #4EA1FF;
    opacity: 1;
  }
  
  .box_word {
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #7A8AAA;
  }
  .task_content{
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 48rpx;
    color: #475368;
  }
  .box_b {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #94A5C7;
    border-bottom: 1rpx solid rgba(148, 165, 199, 0.1);
  }
  
  // .box_b:last-child {
  //   border: none;
  // }
  .box_bb {
    width: 100%;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #94A5C7;
  }
  .box_name_a{
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #475368;
  }
  .JTxtArea {
    background-color: #FFFFFF;
    border-radius: 5rpx;
    width: calc(100% - 16rpx);
    // box-sizing: border-box;
    padding: 12rpx 12rpx 15rpx;
    min-height: 60rpx;
    line-height: 40rpx;
    color: #000000;
    position: relative;
  
    &.sm {
      min-height: 30rpx;
    }
  
    &.lg {
      min-height: 200rpx;
    }
  
    &:after {
      content: attr(data-maxnum);
      position: absolute;
      right: 5rpx;
      bottom: 0rpx;
      font-size: 30rpx;
      color: #999999;
    }
  }
  .upload{
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #94A5C7;
    margin-top: 40rpx;
  }
  .btn_delete{
    position: absolute;
   top: 20rpx;
    right: 150rpx;
    width: 90rpx;
    height: 36rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #4EA1FF;
    background: #FFFFFF;
    opacity: 1;
    text-align: center;
    border: 1rpx solid #4EA1FF;
    border-radius: 4rpx;
    } 
    .btn_upload{
    position: absolute;
    top: 20rpx;
    right: 36rpx;
    width: 90rpx;
    height: 36rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    background: #4EA1FF;
    opacity: 1;
    text-align: center;
    border-radius: 4rpx;
    }
</style>
